<template>
  <div class="app-container">
    <NavBarBread :bread="[$route.meta.parentName, $route.meta.menuName]">
      <div class="handel-export">
        <el-button type="text" style="margin-right:20px;" @click="handelLedgerExport">导出台账</el-button>
        <el-tooltip class="item" effect="dark" content="导出" placement="top-end">
          <i class="el-icon-sold-out" style="font-size: 20px; color: #05A7aB;" @click="handelExport" />
        </el-tooltip>
      </div>
    </NavBarBread>
    <div class="serach-container">
      <div class="search-inputs">
        <el-form :inline="true" :model="simpleForm" class="demo-form-inline searchCondition" label-position="right" label-width="100px">
          <el-form-item label="VIN">
            <el-input v-model="simpleForm.vin" maxlength="17" placeholder="请输入VIM码" />
          </el-form-item>
          <el-form-item label="报警类型">
            <el-select v-model="simpleForm.alarmType" clearable placeholder="请选择报警类型">
              <el-option v-for="item in alarmTypeMap" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="大区">
            <el-select v-model="simpleForm.saleRegionName" clearable placeholder="请选择大区" @change="complexForm.provinceCode = '', complexForm.cityCode = '', $forceUpdate()">
              <el-option v-for="(item, index) in regions" :key="index + '_' + item.bigAreaCode" :label="item.bigAreaName" :value="item.bigAreaCode" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="queryHistoryList">查询</el-button>
          <el-button @click="handelRest">重置</el-button>
        </el-form>
        <div v-show="isMore" class="more-container">
          <el-form :inline="true" :model="complexForm" class="demo-form-inline searchCondition" label-position="right" label-width="100px">
            <el-form-item label="省份">
              <el-select v-model="complexForm.provinceCode" filterable clearable placeholder="请选择省份" @change="complexForm.cityCode = '', $forceUpdate()">
                <el-option v-for="(item, index) in provinceOptions" :key="index + '_' + item.provinceCode" :label="item.provinceName" :value="item.provinceCode" />
              </el-select>
            </el-form-item>
            <el-form-item label="城市">
              <!-- <el-input v-model="complexForm.cityCode" placeholder="请选择城市" /> -->
              <el-select v-model="complexForm.cityCode" filterable clearable placeholder="请选择城市" @change="$forceUpdate()">
                <el-option v-for="(item, index) in cityOptions" :key="index + '_' + item.cityCode" :label="item.cityName" :value="item.cityCode" />
              </el-select>
            </el-form-item>
            <el-form-item label="店代码">
              <el-input v-model="complexForm.dealerCode" placeholder="请输入店代码" />
            </el-form-item>
            <el-form-item label="店简称">
              <el-input v-model="complexForm.dealerShortName" placeholder="请输入店简称" />
            </el-form-item>
            <el-form-item label="车系标准名称">
              <el-select v-model="complexForm.seriesNormalName" filterable clearable placeholder="请选择车系标准名称" @change="complexForm.modelName = '', $forceUpdate()">
                <el-option v-for="item in vehicleNormalOptions" :key="item.seriesNormalName" :label="item.seriesNormalName" :value="item.seriesNormalName" />
              </el-select>
            </el-form-item>
            <el-form-item label="车系">
              <el-select v-model="complexForm.seriesName" filterable clearable placeholder="请选择车系" @change="complexForm.modelName = '', $forceUpdate()">
                <el-option v-for="item in vehicleOptions" :key="item.seriesName" :label="item.seriesName" :value="item.seriesName" />
              </el-select>
            </el-form-item>
            <el-form-item label="车型">
              <el-select v-model="complexForm.modelName" filterable clearable placeholder="请选择车型" @change="$forceUpdate()">
                <el-option v-for="item in modelOptios" :key="item.modelName" :label="item.modelName" :value="item.modelName" />
              </el-select>
            </el-form-item>
            <el-form-item label="上牌大区">
              <el-select v-model="complexForm.plateBigArea" clearable placeholder="请选择上牌大区" @change="complexForm.plateCity = '', $forceUpdate()">
                <el-option v-for="item in plateRegions" :key="item.bigAreaCode" :label="item.bigAreaName" :value="item.bigAreaCode" />
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="demo-form-inline searchCondition" label-position="right" label-width="100px">
            <el-form-item label="上牌城市">
              <el-select v-model="complexForm.plateCity" filterable clearable placeholder="请选择上牌城市" @change="$forceUpdate()">
                <el-option v-for="item in plateCityOptions" :key="item.cityCode" :label="item.cityName" :value="item.cityCode" />
              </el-select>
            </el-form-item>
            <el-form-item label="开票日期">
              <el-date-picker v-model="invoiceDate" type="daterange" clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item label="上牌日期">
              <el-date-picker v-model="plateDate" type="daterange" clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="demo-form-inline searchCondition" label-position="right" label-width="100px">
            <el-form-item label="报警时间">
              <el-date-picker v-model="alarmTime" type="daterange" clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <!-- <el-form-item label="报警是否有效">
              <el-select v-model="complexForm.alarmValid" clearable placeholder="请选择报警是否有效">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item> -->
            <el-form-item label="报警是否下发">
              <el-select v-model="complexForm.alarmSendStatus" clearable placeholder="请选择报警是否下发">
                <el-option label="未下发" :value="0" />
                <el-option label="已下发" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否申诉">
              <el-select v-model="complexForm.appealStatus" clearable placeholder="请选择是否申诉">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="demo-form-inline searchCondition" label-position="right" label-width="100px">
            <el-form-item label="是否跨大区">
              <el-select v-model="complexForm.spanBigArea" clearable placeholder="请选择是否跨大区">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="审核角色">
              <el-select v-model="complexForm.handleBy" clearable placeholder="请选择审核角色">
                <!-- 暂时未有数据 -->
                <!-- <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="申诉处理状态">
              <el-select v-model="complexForm.appealHandleStatus" clearable placeholder="请选择申诉处理状态">
                <el-option v-for="(item, key) in appealHandleMap" :key="key" :label="appealHandleMap[key]" :value="key" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="search-toggle">
        <el-button
          type="text"
          @click="handelToggle"
        >
          {{ isMore ? '普通搜索' : '高级搜索' }}
        </el-button>
      </div>
    </div>
    <div class="section-container">
      <div class="tool-container">
        <div class="toggle-alarm">
          <div v-for="(item, index) in tabs" :key="item.key" :class="[index === activeIndex ? 'isActive' : '']" @click="toggleTbas(index)">{{ item.text }}</div>
        </div>
      </div>
      <el-table v-loading="listLoading" size="mini" :data="tables.data" border fit highlight-current-row style="width: 100%" height="600">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <!-- <el-table-column width="180px" align="center" label="VIN">
          <template slot-scope="{row}">
            <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column> -->
        <el-table-column v-for="item in tables.columns" :key="item.key" :width="item.width" :label="item.lable" :align="item.align" :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            <span v-if="item.key === 'buyType'">{{ row[item.key] | buyTypeFilter }}</span>
            <span v-else-if="item.key === 'localInvoicing'">{{ row[item.key] | localInvoicingFilter }}</span>
            <span v-else-if="item.key === 'alarmSendStatus'">{{ row[item.key] | alarmSendStatusFilter }}</span>
            <span v-else-if="item.key === 'appealHandleStatus'">{{ row[item.key] | appealHandleFilter }}</span>
            <span v-else-if="item.key === 'useType'">{{ row[item.key] | useTypeFilter }}</span>
            <span v-else-if="item.key === 'appealStatus'">{{ row[item.key] | appealStatusFilter }}</span>
            <span v-else-if="item.key === 'spanBigArea'">{{ row[item.key] | spanBigAreaFilter }}</span>
            <span v-else-if="item.key === 'alarmCount'"><el-button type="text" @click="handelCheckAlarm(row.vin, row.alarmCount)">{{ row[item.key] }}</el-button></span>
            <span v-else>{{ row[item.key] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100" fixed="right">
          <template slot-scope="{row}">
            <el-button
              type="text"
              size="small"
              @click="handelCheckDetail(row, isHandel=false)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="pages.page" :limit.sync="pages.limit" @pagination="changePages" />
    </div>
    <!-- <el-dialog title="详情" :visible.sync="detailVisible" width="60%">
      <div class="detailContainer">
        <div v-for="item in tables.columns" :key="item.key" class="detailItem">
          <div v-if="item.key === 'buyType'"><span class="detailTitle">{{ item.lable }}：</span>{{ buyTypeMap[detailData[item.key]] }}</div>
          <div v-else-if="item.key === 'localInvoicing'"><span class="detailTitle">{{ item.lable }}：</span>{{ localInvoicingMap[detailData[item.key]] }}</div>
          <div v-else-if="item.key === 'alarmSendStatus'"><span class="detailTitle">{{ item.lable }}：</span>{{ alarmSendStatusMap[detailData[item.key]] }}</div>
          <div v-else-if="item.key === 'appealHandleStatus'"><span class="detailTitle">{{ item.lable }}：</span>{{ appealHandleMap[detailData[item.key]] }}</div>
          <div v-else-if="item.key === 'useType'"><span class="detailTitle">{{ item.lable }}：</span>{{ useTypeMap[detailData[item.key]] }}</div>
          <div v-else-if="item.key === 'appealStatus'"><span class="detailTitle">{{ item.lable }}：</span>{{ appealStatusMap[detailData[item.key]] }}</div>
          <div v-else-if="item.key === 'spanBigArea'"><span class="detailTitle">{{ item.lable }}：</span>{{ spanBigAreaMap[detailData[item.key]] }}</div>
          <div v-else><span class="detailTitle">{{ item.lable }}：</span>{{ detailData[item.key] }}</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="detailVisible = false">确 认</el-button>
      </div>
    </el-dialog> -->
    <AlarmCounts ref="alarmCounts" />
    <DetailDialog :fileds="tables.columns" :currents="detailData" :dialog-visible="detailVisible" @close="detailVisible = false" />
  </div>
</template>

<script>
import { queryHistory, alarmInfoExport, alarmLedgerExport } from '@/api/crossRegionalMonitoring'
import Pagination from '@/components/Pagination'
import NavBarBread from '@/components/NavBarBread'
import { exportExcelByBlob, getStorageByKey, unique_arr_by_key } from '@/utils/public'
import AlarmCounts from './components/alarmCounts'
import DetailDialog from './components/detailDialog'
import {
  dateFtt,
  alarmSendStatusMap,
  buyTypeMap,
  localInvoicingMap,
  appealHandleMap,
  appealStatusMap,
  spanBigAreaMap,
  useTypeMap } from '@/utils/public'
export default {
  name: 'ProcessedAlarm',
  components: { Pagination, NavBarBread, AlarmCounts, DetailDialog },
  filters: {
    // 购车领域
    buyTypeFilter(status) {
      return buyTypeMap[status]
    },
    // 是否本店开票0=异地 1=本地 , localInvoicing
    localInvoicingFilter(status) {
      return localInvoicingMap[status]
    },
    // 报警是否有效
    alarmSendStatusFilter(status) {
      return alarmSendStatusMap[status]
    },
    // 申诉处理状态
    appealHandleFilter(status) {
      return appealHandleMap[status]
    },
    // 申诉状态
    appealStatusFilter(status) {
      return appealStatusMap[status]
    },
    // 是否跨大区，0否1是
    spanBigAreaFilter(status) {
      return spanBigAreaMap[status]
    },
    // useType (integer, optional): 使用性质，0=营运，1=非营运，2=出租客运 ,
    useTypeFilter(status) {
      return useTypeMap[status]
    }
  },
  data() {
    return {
      alarmTypeMap: getStorageByKey('alarmTypeMap') || [],
      alarmSendStatusMap,
      buyTypeMap,
      localInvoicingMap,
      appealHandleMap,
      appealStatusMap,
      spanBigAreaMap,
      useTypeMap,
      tables: {
        columns: [
          { lable: 'VIN', key: 'vin', width: '180px', align: 'center' },
          { lable: '报警类型', key: 'alarmType', width: '160px', align: 'center' },
          { lable: '围栏名称', key: 'fenceName', width: '100px', align: 'center' },
          { lable: '大区', key: 'saleRegionName', width: '100px', align: 'center' },
          { lable: '省份', key: 'province', width: '80px', align: 'center' },
          { lable: '城市', key: 'city', width: '80px', align: 'center' },
          { lable: '店简称', key: 'dealerShortName', width: '100px', align: 'center' },
          { lable: '店代码', key: 'dealerCode', width: '80px', align: 'center' },
          { lable: '当前位置', key: 'vehicleAddress', width: '180px', align: 'center' },
          { lable: '出围栏时间', key: 'outTime', width: '160px', align: 'center' },
          { lable: '报警时间', key: 'alarmTime', width: '160px', align: 'center' },
          { lable: '回围栏时间', key: 'inTime', width: '160px', align: 'center' },
          { lable: '报警次数', key: 'alarmCount', width: '80px', align: 'center' },
          { lable: '报警是否下发', key: 'alarmSendStatus', width: '180px', align: 'center' },
          { lable: '报警下发次数', key: 'alarmSendCount', width: '100px', align: 'center' },
          { lable: '是否申诉', key: 'appealStatus', width: '80px', align: 'center' },
          { lable: '是否跨大区', key: 'spanBigArea', width: '90px', align: 'center' },
          { lable: '审核角色', key: 'handleBy', width: '80px', align: 'center' },
          { lable: '申诉处理状态', key: 'appealHandleStatus', width: '100px', align: 'center' },
          { lable: '实时里程(KM)', key: 'mileage', width: '110px', align: 'center' },
          { lable: '报警时里程(KM)', key: 'alarmMileage', width: '110px', align: 'center' },
          { lable: '解除报警原因', key: 'relieveAlarmCause', width: '180px', align: 'center' },
          { lable: '解除报警时间', key: 'handleTime', width: '180px', align: 'center' },
          { lable: '车系标准名称', key: 'seriesNormalName', width: '100px', align: 'center' },
          { lable: '车系', key: 'seriesName', width: '120px', align: 'center' },
          { lable: '车型', key: 'modelName', width: '160px', align: 'center' },
          { lable: '颜色', key: 'colorName', width: '100px', align: 'center' },
          { lable: '开票单位', key: 'invoiceCompany', width: '160px', align: 'center' },
          { lable: '是否本店开票', key: 'localInvoicing', width: '100px', align: 'center' },
          { lable: '开票价', key: 'invoicingPrice', width: '80px', align: 'center' },
          { lable: '开票城市', key: 'invoiceAddress', width: '180px', align: 'center' },
          { lable: '上牌人姓名', key: 'plateName', width: '90px', align: 'center' },
          { lable: '购车领域', key: 'buyType', width: '80px', align: 'center' },
          { lable: '使用性质', key: 'useType', width: '80px', align: 'center' },
          { lable: '上牌大区', key: 'plateBigArea', width: '80px', align: 'center' },
          { lable: '上牌省份', key: 'plateProvince', width: '80px', align: 'center' },
          { lable: '上牌城市', key: 'plateCity', width: '80px', align: 'center' },
          { lable: '上牌日期', key: 'plateDate', width: '180px', align: 'center' },
          { lable: '车牌号', key: 'plateNumber', width: '100px', align: 'center' },
          { lable: '发车日期', key: 'deliveryDate', width: '160px', align: 'center' },
          { lable: '入库日期', key: 'stockInTime', width: '160px', align: 'center' },
          { lable: '出库日期', key: 'stockOutTime', width: '160px', align: 'center' },
          { lable: '开票日期', key: 'invoiceDate', width: '160px', align: 'center' }
        ],
        data: []
      },
      pages: {
        pageNum: 1,
        pageSize: 20
      },
      total: 0,
      listLoading: true,
      detailVisible: false,
      detailData: {},
      simpleForm: {},
      complexForm: {},
      invoiceDate: [],
      plateDate: [],
      alarmTime: [],
      isMore: false,
      tabs: [
        { text: '有效报警', key: 0, value: 1 },
        { text: '无效报警', key: 1, value: 0 }
      ],
      activeIndex: 0,
      // 大区数据
      regions: getStorageByKey('regionsMap'),
      // 上牌大区数据
      plateRegions: getStorageByKey('regionsMap'),
      // 车系车型数据集
      vehicleOptions: getStorageByKey('vehicleMap'),
      // 车系标准名称(去重)
      vehicleNormalOptions: unique_arr_by_key('seriesNormalName', getStorageByKey('vehicleMap'))
    }
  },
  computed: {
    // 省份下拉选项 跟随所选大区而变化
    provinceOptions() {
      if (this.regions && this.regions.length) {
        const currentBigArea = this.regions.filter(item => this.simpleForm.saleRegionName === item.bigAreaCode)
        const allProvince = this.regions.reduce((newArr, current) => {
          return newArr.concat(current.provinceList)
        }, [])
        if (currentBigArea.length) return unique_arr_by_key('provinceCode', currentBigArea[0].provinceList)
        return unique_arr_by_key('provinceCode', allProvince)
      } else {
        return []
      }
    },
    // 城市下拉选项 跟随所选省份而变化
    cityOptions() {
      const currentProvince = this.provinceOptions.filter(item => this.complexForm.provinceCode === item.provinceCode)
      if (currentProvince.length) return currentProvince[0].cityDtoList
      const allCity = this.provinceOptions.reduce((newArr, current) => {
        return newArr.concat(current.cityDtoList)
      }, [])
      return allCity
    },
    // 上牌城市下拉选项 跟随上牌大区而变化
    plateCityOptions() {
      if (this.plateRegions && this.plateRegions.length) {
        // 获得所有城市列表
        const allCity = this.plateRegions.reduce((newArr, current) => {
          return newArr.concat(
            current.provinceList.reduce((newCityArr, currentProvince) => {
              return newCityArr.concat(currentProvince.cityDtoList)
            }, [])
          )
        }, [])
        // 获取所选大区下的城市
        const plateBigArea = this.complexForm.plateBigArea
        const currentarea_next_province = this.plateRegions.filter(item => item.bigAreaCode === plateBigArea)
        console.log(currentarea_next_province)
        if (currentarea_next_province.length) {
          return currentarea_next_province[0].provinceList.reduce((newArr, current) => {
            return newArr.concat(current.cityDtoList)
          }, [])
        } else {
          return allCity
        }
      } else {
        return []
      }
      // return allCity
    },
    // 车型下拉选项，跟随车系而变化
    modelOptios() {
      if (this.vehicleOptions && this.vehicleOptions.length) {
        const { seriesName, seriesNormalName } = this.complexForm
        const allModel = this.vehicleOptions.reduce((newArr, current) => {
          return unique_arr_by_key('modelName', newArr.concat(current.modelNameList))
        }, [])
        const currentModelList = this.vehicleOptions.filter(item => item.seriesName === seriesName || item.seriesNormalName === seriesNormalName)
        console.log(currentModelList)
        if (currentModelList.length) return currentModelList[0].modelNameList
        return allModel
      } else {
        return []
      }
    }
  },
  created() {
    this.queryHistoryList()
  },
  methods: {
    changePages(params) {
      this.pages = { ...params }
      this.queryHistoryList()
    },
    async queryHistoryList() {
      this.listLoading = true
      const { data } = await queryHistory(this.formatParams())
      const items = data.data
      this.tables.data = items.list
      this.total = items.total
      this.listLoading = false
    },
    formatParams() {
      const params = { ...this.simpleForm, ...this.complexForm, ...this.pages }
      const saleRegionName = this.simpleForm.saleRegionName
      const { plateBigArea, plateCity } = this.complexForm
      // console.log(this.invoiceDate)
      // 将大区代码转换成大区名称
      if (saleRegionName) {
        const target = this.regions.find(item => item.bigAreaCode === saleRegionName)
        params['saleRegionName'] = target.bigAreaName
      }
      if (plateBigArea) {
        const target = this.regions.find(item => item.bigAreaCode === plateBigArea)
        params['plateBigArea'] = target.bigAreaName
      }
      if (plateCity) {
        const target = this.cityOptions.find(item => item.cityCode === plateCity)
        params['plateCity'] = target.cityName
      }
      if (this.invoiceDate && this.invoiceDate.length) {
        params['invoiceDateStart'] = dateFtt(this.invoiceDate[0])
        params['invoiceDateEnd'] = dateFtt(this.invoiceDate[1], 'yyyy-MM-dd') + ' 23:59:59'
      }
      if (this.plateDate && this.plateDate.length) {
        params['plateDateStart'] = dateFtt(this.plateDate[0])
        params['plateDateEnd'] = dateFtt(this.plateDate[1], 'yyyy-MM-dd') + ' 23:59:59'
      }
      if (this.alarmTime && this.alarmTime.length) {
        params['alarmTimeStart'] = dateFtt(this.alarmTime[0])
        params['alarmTimeEnd'] = dateFtt(this.alarmTime[1], 'yyyy-MM-dd') + ' 23:59:59'
      }
      params['alarmValid'] = this.tabs[this.activeIndex].value
      params['handleStatus'] = '2'
      return params
    },
    // 清空查询条件
    handelRest() {
      for (const key in this.simpleForm) {
        this.simpleForm[key] = ''
      }
      this.clearComplexSearchCondetions()
    },
    // 清空复杂查询条件
    clearComplexSearchCondetions() {
      for (const key in this.complexForm) {
        this.complexForm[key] = ''
      }
      this.invoiceDate = []
      this.plateDate = []
    },
    handelToggle() {
      this.isMore = !this.isMore
      !this.isMore && this.clearComplexSearchCondetions()
    },
    toggleTbas(index) {
      this.activeIndex = index
      this.queryHistoryList()
    },
    handelCheckDetail(row, isHandel) {
      this.detailVisible = true
      this.detailData = row
    },
    handelExport() {
      const params = this.formatParams()
      this.$delete(params, 'pageNum')
      this.$delete(params, 'pageSize')
      alarmInfoExport(params).then(res => {
        const { data } = res
        const fileName = `${this.$route.meta.menuName}.xlsx`
        exportExcelByBlob(data, fileName)
      })
    },
    handelLedgerExport() {
      const params = this.formatParams()
      this.$delete(params, 'pageNum')
      this.$delete(params, 'pageSize')
      alarmLedgerExport(params).then(res => {
        const { data } = res
        const fileName = `${this.$route.meta.menuName}.xlsx`
        exportExcelByBlob(data, fileName)
      })
    },
    // 查看报警次数详情
    handelCheckAlarm(vin, alarmCount) {
      const params = { handleStatus: '2', alarmValid: this.tabs[this.activeIndex].value, vin, pageSize: alarmCount }
      this.$refs.alarmCounts.queryAlarmCounts(params)
    }
  }
}
</script>
<style lang="scss" scoped>
 ::v-deep(.el-form-item .el-form-item__content){
      width: 200px;
    }
    .el-input{
      width: 202px;
    }
  .detailContainer{
    width: 100%;
    height: 400px;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    .detailItem{
      width: 32%;
      line-height: 50px;
      .detailTitle{
        font-weight: bold;
      }
    }
  }
  .action-container{
      padding-top: 30px;
      margin-top: 20px;
      border-top: 1px solid gray;
    }
  .serach-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .search-inputs{
      width: 90%;
    }
  }
  .tool-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    .toggle-warning{
      font-weight: bold;
    }
    .toggle-alarm{
        display: flex;
        margin-bottom: 20px;
        font-size: 13px;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        cursor: pointer;
        div{
          width: 103px;
          border: 1px solid rgba(121, 121, 121, 1);
          text-align: center;
        }
        :first-of-type{
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          border-right: none
        }
        :last-of-type{
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
        .isActive{
          color: #fff;
          background: rgba(5, 167, 171, 1);
          border-color: rgba(5, 167, 171, 1);
        }
    }
  }
</style>
